<template>
	<view class="page_bg_FAFAFA">
		<view class="top-bg padd-top10">
			<view class="top-con flex justify-center flex-direction">
				<view class="flex justify-between line-height100">
					<view class="cr-333 font_s32 font_w600">
						总学分
					</view>
					<view class="cr-FA312A font_s40 font_w600">
						{{userInfo.score || 0}}
					</view>
				</view>
				<view class="flex justify-between cr-333 font_s26 mar-top32 line-height100">
					<view>
						您的段位
					</view>
					<view>
						{{userInfo.gradeLevelName || ''}}
					</view>
				</view>
			</view>
			<view class="datebox">
				<picker mode="date" start="2024-1" fields="month" :value="date" @change="dateChange">
					<view class="flex align-center">
						<text class="mar-right6">{{dateText}}</text>
						<u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="list">
			<view v-for="(item,index) in list" :key="index" class="list-item">
				<view class="flex justify-between align-center line-height100 ">
					<view class="title">
						<text v-if="item.sourceType == 1">图文</text>
						<text v-else-if="item.sourceType == 2">视频</text>
						<text v-else-if="item.sourceType == 3">音频</text>
						<text v-else-if="item.sourceType == 4">签到</text>
						<text v-else-if="item.sourceType == 5">分享</text>
						<text v-else-if="item.sourceType == 6">邀请好友</text>
						<text v-else-if="item.sourceType == 7">兑换商品</text>
					</view>
					<view class="cr-FA312A font_w600">
						<text class="font_s32 ">{{item.type == -1 ? '-' : '+'}}{{ item.score }}</text>
						<text class="font_s28 mar-left8">分</text>
					</view> 
				</view>
				
				<view class="flex justify-between align-center line-height100 mar-top8">
					<view class="cr-999 font_s24">
						<text class="">{{item.createTime}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	export default {
		data() {
			return {
				userInfo:app.userInfo,
				page:1,
				date:'',
				list:[],
				noMore:false
			};
		},
		computed:{
			dateText(){
				let date = new Date(this.date)
				return  this.$dateFormat(date,'yyyy年mm月')
			}
		},
		onLoad() {
			this.date = this.$dateFormat(null,'yyyy-mm')
			this.getList()
		},
		onReachBottom() {
			if(!this.noMore) this.getList()
		},
		methods:{
			getList(){
				this.$http.get('/yaolexue-service-portal/scoreRecord/userScoreMonth',{
					limit:20,
					page:this.page,
					date:this.date
				}).then(res => {
					if(res.code == 200){
						if(this.page == 1) this.list = []
						this.list = [...this.list,...res.data.items]
						this.noMore = this.list.length >= res.data.total
						this.page++
					}
				})
			},
			dateChange(e){
				this.date = e.detail.value
				this.page = 1 
				this.noMore = false
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg{
		position: relative;
		overflow: hidden;
		height: 300rpx;
		width: 100%;
		background: #fff;
		z-index: 2;
		&::after{
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			background: #FA312A;
			height: 255rpx;
			z-index: -1;
		}
		&::before{
			content: "";
			display: block;
			position: absolute;
			bottom: 0;
			left: -10%;
			width: 120%;
			height: 80rpx; /* 调整这个值来改变弧形的高度 */
			border-radius: 0 0 50% 50%; /* 调整这个值来改变弧形的半径 */
			background: #FA312A;
		}
		.top-con{
			margin: auto;
			width: 689rpx;
			height: 186rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			position: relative;
			padding: 0 20rpx;
		}
		.datebox{
			position: relative;
			color: #fff;
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			margin-top: 20rpx;
		}
	}
	
	.list{
		margin-top: -30rpx;
		position: relative;
		z-index: 2;
		.list-item{
			width: 689rpx;
			// height: 126rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 26rpx 19rpx 26rpx 22rpx;
			margin: 0 auto 20rpx auto;
			.title{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #333333;
				line-height: 50rpx;
			}
		}
	}
	
</style>
